<template>
  <view class="content public">
    <view class="statusTitle">
      <view :class="{ 'statusTitleSelected': statusTitleNum == index }" v-for="(item, index) in statusTitle" :key="index"
        @click="eventStatusTitle(index)">
        <text>{{ item }}</text>
      </view>
    </view>
    <view class="icon-box-img" v-if="arr == [] || arr.length == 0">
      <img src="../../static/index/noResult.png" alt="">
      <view class="text">
        未查询到相关数据
      </view>
    </view>
    <view style="padding-bottom: 150rpx;">
      <view class="main" v-for="item in arr" :key="item.order_id">
        <view class="main-item">
          <view class="title">
            <view class="">
              <!-- <text>3</text>分钟前下单（建议14:32前送达） -->
              订单创建时间：{{ item.create_time | formatTime }}
            </view>
          </view>
          <view class="main-main" @click="JumpOrderDetails(item)">
            <view class="">
              <steps></steps>
            </view>
            <view class="main-right">
              <view class="main-right-business">
                <view class="main-right-header">
                  <!-- 信阳师范大学1食堂二楼201 -->
                  {{ item.site_info.address }}
                </view>
                <view class="main-right-footer">
                  <view class="">
                    <!-- 商家<text>15445434543</text> -->
                    {{ item.site_info.name }} <text>{{ item.site_info.mobile }}</text>
                  </view>
                </view>
              </view>
              <view class="main-right-user" v-if="item.status !== 3">
                <view class="main-right-header">
                  <!-- 信阳师范大学1宿舍楼301 -->
                  {{ item.address }}{{ item.house_number }}
                </view>
                <view class="main-right-footer">
                  <!-- 张三<text>19887656765</text> -->
                  {{ item.name }} <text>{{ item.mobile }}</text>
                </view>
              </view>
            </view>
          </view>
          <view>
            <view class="CollectionAndDeliveryByProxy">
              <!-- 新任务 -->
              <view class="footer-buttonOne">
                <button @click="orders(item)">接单</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" v-if="arr.length > 10" />
    </view>
    <view class="footer">
      <navigator :url="tabBarNumStatus" open-type="navigate">
        <footerView @tabBarNum="tabBarNum" :tabBarNums="1"></footerView>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  props: ['list'],

  data() {
    return {
    }
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.content {
  background: #F7F7F7;

  // 选中外卖订单头部标题
  .statusTitleSelected {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 80rpx;
    color: #F14500;
    border-bottom: 2px solid #F14500;
  }

  // 外卖订单头部标题
  .statusTitle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 750rpx;
    height: 94rpx;
    background: #FFFFFF;
    font-size: 32rpx;
    font-weight: 400;
    color: #2E2E2E;
  }

  // 内容
  .main {
    width: 702rpx;
    // height: 417rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
    border-radius: 20rpx;
    margin: auto;
    margin-top: 16rpx;
    margin-bottom: 20rpx;

    .main-item {
      width: 640rpx;
      margin: auto;

      // 下单时间，什么时间前送到
      .title {
        display: flex;
        justify-content: space-between;
        padding-top: 31rpx;
        padding-bottom: 25rpx;

        .title-right {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 104rpx;
          height: 34rpx;
          border: 1px solid #F14500;
          border-radius: 17rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #F14500;
        }
      }

      .main-main {
        display: flex;
        border-bottom: 1px solid #F2F2F2;
        padding-bottom: 23rpx;

        // 运
        .move {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 38rpx;
          height: 38rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          border-radius: 50%;
          background: #F14500;
          margin-right: 15rpx;
        }

        .main-right {

          // 商家地址，用户地址
          .main-right-header {
            font-size: 26rpx;
            font-weight: 500;
            color: #3A3A3A;
          }

          // 商家电话，用户电话
          .main-right-footer {
            height: 35rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #979797;

            text {
              padding-left: 20rpx;
            }
          }

          .main-right-user {
            padding-top: 38rpx;
          }
        }
      }
    }
  }

  .CollectionAndDeliveryByProxy {

    // 按钮
    .footer-buttonOne {
      margin-top: 40rpx;
      padding-bottom: 20rpx;

      button {
        width: 637rpx;
        height: 69rpx;
        background: #F14500;
        border-radius: 35rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

    // 按钮
    .footer-buttonTwo {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      padding-bottom: 20rpx;

      view:first-child {
        display: flex;
        align-items: center;
        font-size: 35rpx;
        font-weight: 400;
        color: #F14500;
        margin-right: 30rpx;

        image {
          width: 31rpx;
          height: 38rpx;
        }

        text {
          padding-left: 15rpx;
        }
      }

      button {
        // width: 430rpx;
        width: 400rpx;
        height: 69rpx;
        background: #F14500;
        border-radius: 35rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
      }

      .statuschang {
        width: 637rpx;
        // width: 700rpx;
        height: 69rpx;
        background: #F14500;
        border-radius: 35rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
      }
    }

  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}

.icon-box-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 80rpx;
  text-align: center;

  img {
    width: 343rpx;
    height: 306rpx;
  }

  image {
    width: 343rpx;
    height: 306rpx;
  }

  .text {
    margin-top: 35rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #C3C4C4;
    line-height: 30rpx;
  }
}
</style>
